<template>
    <main>
        <Head>
            <Title>Home</Title>
        </Head>
        <!-- Banner Section -->
        <section class="banner brand-1 relative min-h-[940px] bg-black overflow-hidden">
            <!-- 视频背景 -->
            <div class="video-wrapper absolute inset-0 w-full h-full z-0">
                <video
                    class="w-full h-full object-cover pointer-events-none"
                    loop
                    autoplay
                    playsinline
                    muted
                    preload="auto"
                    src="/video/1.mp4"
                >
                
                </video>
            </div>
            <!-- 内容区域 -->
            <div class="container relative z-10">
                <BannerContent />
            </div>
            <BannerShape :bannerAvatar="bannerAvatar" />
            
            <!-- 底部信息区域
            <div class="bottom-info absolute bottom-14 left-0 right-0 z-20">
                <div class="container">
                    <div class="grid grid-cols-3 gap-4 text-white bg-black bg-opacity-20 rounded-lg p-6">
                        <div class="text-center">
                            <div class="text-2xl mb-2">福利收获</div>
                            <p class="text-white-60">高位奖学金｜就业推荐｜福利活动｜优质作品集产出</p>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl mb-2">课程安排</div>
                            <p class="text-white-60">墨化官网线上授课｜文字/直播作业点评，班级群专业答疑</p>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl mb-2">课程讲师</div>
                            <p class="text-white-60">MOTZIFY官方讲师</p>
                        </div>
                    </div>
                </div>
            </div> -->
        </section>
        <!-- About Section -->
        <section class="about about--style1 padding-top padding-bottom">
            <div class="container">
                <About />
            </div>
        </section> 
        <!-- Category Section -->
        <section class="categories categories--style1  padding-bottom brand1-bg-1">
            <div class="container">
                <Categories :categoryListOne="categoryListOne" />
            </div>
        </section>
        <!-- Popular course Section -->
        <section class="course course--style1 padding-top padding-bottom brand-1" data-aos="fade-up"
            data-aos-duration="800">
            <div class="container-fluid px-lg-0">
                <!-- 以前的 -->
                <!-- <PopularCourse :courses="courses.slice(0, 5)" /> -->
                <!-- 新的 -->
                <PopularCourse :courses="info1" />
            </div>
        </section>
        <!-- Our Success Story Section -->
        <section class="story padding-top padding-bottom" data-aos="fade-up" :data-os-offset="screenHeight/5" data-aos-duration="800">
            <div class="container">
                <OurSuccessStory />
            </div>
        </section>
        <!-- Team section Story Section 
        <section class="team  team--style1 padding-bottom" data-aos="fade-up" data-aos-duration="800">
            <div class="container">
                <MeetOurExpert :teamList="teamList" />
            </div>
        </section>-->
        <!-- Community section Story Section
        <section class="community community--style1 padding-top padding-bottom brand1-bg-1" data-aos="fade-up"
            data-aos-duration="800">
            <div class="container">
                <CommunityLearning :learningImg="learningImg" />
            </div>
        </section> -->
        <!-- Testimonial Story Section -->
        <section class="testimonial testimonial--style1 padding-top padding-bottom brand-1">
            <div class="container">
                <Testimonial :testimonials="testimonials" />
            </div>
        </section>
        <!-- Blog  Section -->
        <section class="blog blog--style1 padding-top padding-bottom">
            <div class="container">
                <Blog :posts="posts" />
            </div>
        </section>

        <!-- Partners Section -->
        <section class="partner padding-bottom" data-aos="fade-up" data-aos-duration="800">
            <div class="container">
                <Partners :partnerOne="partnerOne" />
            </div>
        </section>
        <!-- Newsletter Section -->
        <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
            <div class="container">
                <Newsletter />
            </div>
        </div>

        <!-- Newsletter Section -->


    </main>
</template>

<script type="text/javascript" >
import BannerContent from '@/components/modules/index/BannerContent.vue'
import BannerShape from '@/components/modules/index/BannerShape.vue'
import Categories from '@/components/modules/index/Categories.vue'
import About from '@/components/modules/index/About.vue'
import PopularCourse from '@/components/modules/index/PopularCourse.vue'
import OurSuccessStory from '@/components/modules/index/OurSuccessStory.vue'
import MeetOurExpert from '@/components/modules/index/MeetOurExpert.vue'
import CommunityLearning from '@/components/modules/index/CommunityLearning.vue'
import Testimonial from '@/components/modules/index/Testimonials.vue'
import Blog from '@/components/modules/index/Blog.vue'
import Partners from '@/components/modules/index/Partners.vue'
import Newsletter from "@/components/partials/newsletters/Newsletter.vue";
import {usePosts} from "@/public/api/imageInfo.js"
export default {
    scrollToTop: true,
    components: { BannerContent, BannerShape, Categories, About, PopularCourse, OurSuccessStory, MeetOurExpert, CommunityLearning, Testimonial, Blog, Partners, Newsletter },
    async setup() {
        const { axios } = fetchData()
        const { screenHeight } = common()
        const generals = await axios.get('/general.json')
        const categoryListOne = generals.data.categoryListOne
        const teamList = generals.data.teamList
        const bannerAvatar = generals.data.bannerAvatar

        const homeTestimonialsResponse = await axios.get('/home_testimonials.json')
        const testimonials = homeTestimonialsResponse.data
        const coursesResponse = await axios.get('/home_courses.json')
        const courses = coursesResponse.data
        const mentor = await axios.get('/mentor.json')
        const partnerOne = mentor.data.partnerOne
        const blog = await axios.get('/blog.json')
        const posts = blog.data.posts
        const learningImg = blog.data.learningImg
        return {
            bannerAvatar,
            categoryListOne,
            courses,
            teamList,
            testimonials,
            partnerOne,
            posts,
            learningImg,
            screenHeight
        };
    },
    data(){
        return {
            info1 : []
        }
    },
    created (){
        // console.log("this.info1",this.info1)
        this.getInfo()
    },
    methods:{
        getInfo(){
            // console.log("rrrr",this.info1)
            usePosts().then((res)=>{
                // console.log("rrrr999",this.info1)
                this.info1  = res.data.value.rows
                // console.log("res.data.value.rows",res.data.value.rows)
            })
        }
    },
    head() {
        return {
            title: "Home",
        }
    },
}
</script>

<style lang="scss" scoped>
h1 {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 3rem);
}
</style>